<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/loading-icon.css">
    <link rel="stylesheet" type="text/css" href="/static/css/Common.css">
    <title>客户信息</title>
</head>
<body>
<div class="sk-three-bounce" id="sk-three-bounce" style="display: none">
    <div class="sk-child sk-bounce1"></div>
    <div class="sk-child sk-bounce2"></div>
    <div class="sk-child sk-bounce3"></div>
</div>
<div style="width: 100%;height: 100%;padding: 0;margin: 0" id="main_viewer">
    <div>
        <div style="margin-top: 3px" id="increase" class="layui-btn layui-btn-warm layui-btn-sm" sec:authorize="hasAnyRole('manager','admin')">办卡</div>
        <table lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{field:'card_id',sort:true}">卡号</th>
                <th lay-data="{field:'balance',sort:true}">余额</th>
                <th lay-data="{field:'bank_id',sort:true}">所属银行编号</th>
                <th lay-data="{field:'card_type',sort:true}">卡类型</th>
                <th lay-data="{width:200, toolbar:'#barDemo'}" sec:authorize="hasAnyRole('manager','admin')">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="record:${results}">
                <td th:text="${record.card_id}">卡号</td>
                <td th:text="${record.balance}">余额</td>
                <td th:text="${record.bank_id}">所属银行编号</td>
                <td th:text="${record.card_type}">卡类型</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="flow_block" class="layui-form" style="display: none">
    <form method="post" class="layui-form layui-form-pane" style="margin: 10px" action="/applyCard">
        <div class="layui-form-item">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="card_id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户ID</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="client_id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">余额</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="balance">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属银行编号</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="bank_id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">卡类型</label>
            <div class="layui-input-inline">
                <select class="layui-select layui-bg-blue" lay-verify="required" name="card_type">
                    <option>saving_card</option>
                    <option>credit_card</option>
                </select>
                <!--<input type="text" class="layui-input" lay-verify="required" name="card_type">-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">办卡时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="time" id="today">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="submit" value="保存" class="layui-btn layui-btn-normal">
        </div>
    </form>
</div>
<div id="flow_block2" class="layui-form" style="display: none">
    <form method="post" class="layui-form layui-form-pane" style="margin: 10px" action="/updateCard">
        <div class="layui-form-item">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="card_id" id="card_id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">余额</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="balance" id="balance">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属银行编号</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="bank_id" id="bank_id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">卡类型</label>
            <div class="layui-input-inline">
                <select class="layui-select layui-bg-blue" lay-verify="required" name="card_type" >
                    <option>saving_card</option>
                    <option>credit_card</option>
                </select>
                <!--<input type="text" class="layui-input" lay-verify="required" name="card_type">-->
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="submit" value="保存" class="layui-btn layui-btn-normal">
        </div>
    </form>
</div>
<script type="text/javascript" src="/static/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/LoadingJS.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>

    <!--<a class="btn btn-danger" th:href="@{'/deletecard/'+${card_id}}">删除</a>-->

    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del" >删除</a>
    <!--这个地方还要把layui的删除按钮绑定delectcard这个操作-->
</script>
<script>
    var table = layui.table;

    //转换静态表格
    table.init('demo', {
        limit: 8 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
        //支持所有基础参数
        ,page:true
        ,limits: [8,16,24,32,40,48,56,64,72]
    });
</script>
<script type="text/javascript">
    function today(){//构建方法
        var today=new Date();//new 出当前时间
        var h=today.getFullYear();//获取年
        var m=today.getMonth()+1;//获取月
        var d=today.getDate();//获取日
        var H = today.getHours();//获取时
        var M = today.getMinutes();//获取分
        var S = today.getSeconds();//获取秒
        return h+"-"+m+"-"+d+" "+H+":"+M+":"+S; //返回 年-月-日 时:分:秒
}
document.getElementById("today").value = today();//将获取到的 年-月-日 时:分:秒 赋给input文本输入框
</script>
<script type="text/javascript" src="/static/js/CardViewer.js"></script>
</body>
</html>

